Bootstrap Snippet scroll animation effect using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    
</head>
<body>
        <div class="container">
                <div class="block">
                    <div class="img"></div>
                    <div class="translaterContainer"><div class="translater"></div></div>              
                        <p class="text1">James Smith</p>
                        <p class="text2">Founder/Director</p>
                    
                </div>
                <div class="block">
                        <div class="img"></div>
                        <div class="translaterContainer"><div class="translater"></div></div>
                        <p class="text1">Maria Garcia</p>
                        <p class="text2">Assistant Executive</p>
                </div>
                <div class="block">
                        <div class="img"></div>
                        <div class="translaterContainer"><div class="translater"></div></div>
                        <p class="text1">John Jones</p>
                        <p class="text2">Creative Director</p>
                </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
    width: 100vw;
    height: 300vh;
}
.container{
    width: 70%;
    height: 80%;
    margin: 0 auto;
}
.block{
    position: relative;
    width: 200px;
    height: 300px;
}
.container .block:nth-child(1), .container .block:nth-child(3), .container .block:nth-child(5){
    margin-left: auto;
}
.container .block:nth-child(2), .container .block:nth-child(4), .container .block:nth-child(6){
     margin-right: auto;
}
.container .block:nth-child(1) .img{
    background-image: url(https://i.postimg.cc/prrTDfjM/4.jpg);
}
.container .block:nth-child(2) .img{
    background-image: url(https://i.postimg.cc/D0Nz5SQJ/033321112df5d5a0392082517cbe5143-model-portrait-beauty-portrait.jpg
);   
}
.container .block:nth-child(3) .img{
    background-image: url(https://i.postimg.cc/7Yp62TYj/39e9b39628e745a39f900dc14ee4d9a7.jpg
); 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"scroll animation effect"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"scroll animation effect" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"scroll animation effect"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY